<template>
	<view>
	<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
    <view class="body after-navber">
        <view class="bottom-bar">
            <navigator url="/pages/address-edit/address-edit">添加新地址</navigator>
        </view>
        <view class="no-data-tip" v-if="data.show_no_data_tip">暂无收货地址</view>
        <view class="address-list">
            <view class="address-item" v-for="(item,index) of data.address_list" :key="item.id">
                <view class="userinfo flex-row">
                    <view class="flex-grow-1">收货人：{{item.name}}</view>
                    <view class="flex-grow-0">{{item.mobile}}</view>
                </view>
                <view class="address-detail">收货地址：{{item.address}}</view>
                <view class="flex-row">
                    <view class="flex-grow-1">
                        <view style="display: inline-block" v-if="item.is_default==1">
                            <view class="default-address active flex-row flex-y-center">
                                <image :src="data.__wxapp_img.dapp.checked.url" style="width: 40upx;height: 40upx;margin-right: 12upx"></image>
                                <text>默认地址</text>
                            </view>
                        </view>
                        <view style="display: inline-block" v-else>
                            <view @click="setDefaultAddress" class="default-address flex-row flex-y-center" :data-index="index">
                                <image :src="data.__wxapp_img.dapp.uncheck.url" style="width: 40upx;height: 40upx;margin-right: 12upx"></image>
                                <text>设为默认</text>
                            </view>
                        </view>
                    </view>
                    <view class="flex-grow-0 flex-row">
                        <navigator class="address-option flex-y-center" :url="'/pages/address-edit/address-edit?id='+item.id">
                            <image :src="data.__wxapp_img.dapp.edit.url"></image>
                            <text>编辑</text>
                        </navigator>
                        <view @click="deleteAddress" class="address-option flex-y-center" :data-id="item.id" :data-index="index">
                            <image :src="data.__wxapp_img.dapp.delete.url"></image>
                            <text>删除</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <comp-footer v-bind="{data:data}"></comp-footer>

</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data(){
			return{
				data: {
					address_list: []
				}
			}
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
        var e = this;
        myVue.getApp.core.showNavigationBarLoading(), myVue.getApp.request({
            url: myVue.getApp.api.user.address_list,
            success: function(t) {
                e.getApp.core.hideNavigationBarLoading(), 0 == t.code && e.setData({
                    address_list: t.data.list
                }), e.setData({
                    show_no_data_tip: 0 == e.data.address_list.length
                });
            }
        });
    },
		methods:{
			setDefaultAddress: function(e) {
        var t = this, s = e.currentTarget.dataset.index, a = t.data.address_list[s];
        myVue.getApp.core.showLoading({
            title: "正在保存",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.address_set_default,
            data: {
                address_id: a.id
            },
            success: function(e) {
                if (myVue.getApp.core.hideLoading(), 0 == e.code) {
                    var a = t.data.address_list;
                    for (var d in a) a[d].is_default = d == s ? 1 : 0;
                    t.setData({
                        address_list: a
                    });
                }
            }
        });
    },
    deleteAddress: function(e) {
        var t = e.currentTarget.dataset.id;
        e.currentTarget.dataset.index;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "确认删除改收货地址？",
            success: function(e) {
                e.confirm && (myVue.getApp.core.showLoading({
                    title: "正在删除",
                    mask: !0
                }), myVue.getApp.request({
                    url: myVue.getApp.api.user.address_delete,
                    data: {
                        address_id: t
                    },
                    success: function(e) {
                        0 == e.code && myVue.getApp.core.redirectTo({
                            url: "/pages/address/address"
                        }), 1 == e.code && (myVue.getApp.core.hideLoading(), myVue.getApp.core.showToast({
                            title: e.msg
                        }));
                    }
                }));
            }
        });
    }
		}
	}
</script>

<style scoped>
.bottom-bar {
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
    z-index: 1000;
}

.bottom-bar navigator {
    background: #ff4544;
    text-align: center;
    height: 100upx;
    line-height: 100upx;
    color: #fff;
}

.address-list {
    padding-bottom: 100upx;
}

.address-item {
    background: #fff;
    margin-bottom: 20upx;
    padding: 32upx 24upx;
}

.userinfo {
    margin-bottom: 24upx;
}

.address-detail {
    border-bottom: 1upx solid #eee;
    margin-bottom: 24upx;
    padding-bottom: 24upx;
}

.address-option {
    margin-left: 48upx;
}

.address-option image {
    width: 32upx;
    height: 32upx;
    margin-right: 16upx;
}

.default-address {
    width: auto;
}

.default-address.active {
    color: #fe6e00;
}
</style>